<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bod y{
				width: 500px;
				height: 1000000000px;
				background-image: url(img/熊出没.png);
				background-size: contain;
				/* 函数 cover 等比例放大图片 特点：原图：按照比例放大存背景空间
				        【开发者：背景图等比例显示在背景空间】
				       contain 等比例放大图片 特点：图片按照比例放大存背景空间
					   【开发者：背景图等比例显示在背景空间】*/
					/* 背景附件————尺寸中存在corver或者contain */
					   background-attachment: fixed;/* 固定 scroll 不固定 */
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #ffff00;
				background-image: url(img/熊出没.png);
				/* 问题：超大图-不想显示 小图-显示
				 注意-空间大小，如果图小于背景空间---平铺*/
				 background-repeat: no-repeat;/* 不平铺  repeat-x 横   repeat-y 纵向平铺*/
				 background-size: 30%;
				 /* 背景尺寸属性值、数值px % | 函数 cover contain*/
				 /* 背景定位、前提背景空间大于背景图、关键字 center、left、right、top......*/
				 background-position: right bottom;/* 左右80% 上下20%*/
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur nostrum, odit, praesentium, earum modi adipisci quae suscipit possimus corporis velit ipsum! Consequuntur voluptas dignissimos eos quo nam et impedit laboriosam.
		<!-- html img图片  引入一张图片，位置不可以随意改变
		    css  背景图片  引入一张图片，位置可以随意改变
			子属性 background -color 背景颜色
			      background -image 背景图
				  background-size 背景尺寸
				  background-attachment 背景附件
				  background-position 背景定位
				  background-repeat 背景重复
			复合属性 background     ---同上----但是---background-attachment/background-repeat【二选一】
			-->
			<div></div>
	</body>
</html>